<template>
    <div>
        <el-card>
            <el-form :inline="true" :model="queryForm" ref="queryFormRef">
                <el-form-item label="订单号" prop="id">
                    <el-input v-model="queryForm.id" clearable />
                </el-form-item>
                <el-form-item label="用户id" prop="wxId">
                    <el-input v-model="queryForm.wxId" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :disabled="loading" @click="submitForm"
                        v-has="'btn.queryOrder'">查询</el-button>
                    <el-button @click="resetForm(queryFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card>
            <el-table :data="records" style="width: 100%;" v-loading="loading" border>
                <el-table-column type="index" label="序号" width="80" align="center" />
                <el-table-column prop="id" label="订单号" min-width="120" align="center" />
                <el-table-column prop="wxId" label="用户id" min-width="50" align="center" />
                <el-table-column prop="orderList" label="商品详情" min-width="100" align="center">
                    <template #default="{ row }">
                        <div class="product-images">
                            <img v-for="(item, index) in parseOrderImage(row).slice(0, 3)" :key="index" :src="item"
                                class="product-image">
                            <span v-if="parseOrderImage(row).length > 3" class="more-images">
                                +{{ parseOrderImage(row).length - 3 }}
                            </span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="下单时间" min-width="100" align="center"></el-table-column>
                <el-table-column label="操作" min-width="100" align="center">
                    <template #default="{ row }">
                        <el-button icon="MoreFilled" @click="handleDetail(row)" v-has="'btn.queryDetail'">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-pagination v-model:current-page="queryForm.currentPage" v-model:page-size="queryForm.pageSize"
            :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />

        <el-dialog title="订单详情" v-model="dialogVisible" :close-on-click-modal="false">
            <el-card>
                <el-table :data="orderDetail?.cartList" style="width: 100%;height: 500px;" border>
                    <el-table-column prop="name" label="商品名称" min-width="100" align="center" />
                    <el-table-column prop="url" label="商品图片" min-width="100" align="center">
                        <template #default="{ row }">
                            <el-image class="product-image" :src="row.url"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="num" label="商品数量" min-width="100" align="center" />
                    <el-table-column prop="unitPrice" label="商品单价" min-width="100" align="center" />
                    <el-table-column prop="price" label="商品总价" min-width="100" align="center" />
                </el-table>
            </el-card>
            <div class="order-total">
                <p>共{{ orderDetail?.totalNum }}件商品，小计￥{{ orderDetail?.totalPrice }}</p>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="Order">
import { onMounted, ref } from 'vue';
import { type FormInstance } from 'element-plus';
import { reactive } from 'vue';
import { orderPage } from '@/api/wx/order';
import type { CartResultType, OrderPageRequest, OrderType } from '@/api/wx/order/types';

// ---------- 查询 ----------
const loading = ref(false)
const queryForm = reactive<OrderPageRequest>({ currentPage: 1, pageSize: 10 })
const queryFormRef = ref<FormInstance>()
let total = ref(0)
let records = ref<OrderType[]>([])

onMounted(() => {
    submitForm()
})

const submitForm = async () => {
    loading.value = true
    const data = await orderPage(queryForm);
    if (data.code === 200) {
        records.value = data.data.records
        total.value = data.data.total
    }
    loading.value = false
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
const handleSizeChange = (val: number) => {
    queryForm.currentPage = 1
    queryForm.pageSize = val
    submitForm()
}
const handleCurrentChange = (val: number) => {
    queryForm.currentPage = val;
    submitForm()
}

// 计算图片数据
const parseOrderImage = (row: OrderType): string[] => {
    return row.cartResultVO?.cartList?.map(item => item.url) ?? [];
}

// ---------- 详情弹框 ----------
const dialogVisible = ref(false)
const orderDetail = ref<CartResultType>()

const handleDetail = (row: OrderType) => {
    dialogVisible.value = true
    orderDetail.value = row.cartResultVO
}

</script>

<style scoped lang="scss">
.el-card {
    margin-bottom: 20px;
    min-width: 600px;

    .el-form {

        .el-input {
            width: 240px;
        }

        .el-form-item {
            margin-bottom: 0;
        }
    }
}

.product-images {
    display: flex;
    gap: 4px;
    justify-content: center;

    .more-images {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        background: #f5f7fa;
        color: #999999;
        border-radius: 4px;
        font-size: 12px;
        border: 1px solid #eee;
    }
}

.product-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #eee;
}

.order-total {
    font-size: 18px;
    display: flex;
    justify-content: flex-end;
    padding: 10px;
}
</style>